<template>
  <view class="content">
    <form class="app-update-pv">

      <view
          :style='{"padding":"0 40rpx","boxShadow":"0 0 0px rgba(0,0,0,.3)","margin":"0 0 20rpx 0","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"108rpx"}'
          class="cu-form-group">
        <view
            :style='{"padding":"0","boxShadow":"0 0 16rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"rgba(161, 161, 161, 1)","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"160rpx","lineHeight":"80rpx","fontSize":"28rpx","borderStyle":"solid"}'
            class="title">名称
        </view>
        <input
            :style='{"padding":"0 30rpx","boxShadow":"0 0 0px rgba(0,0,0,.6) inset","margin":"0","borderColor":"rgba(0,0,0,.6)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(161, 161, 161, 1)","textAlign":"left","borderRadius":"16rpx","borderWidth":"2rpx","width":"calc(100% - 160rpx)","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}'
            :disabled="ro.name" v-model="ruleForm.name" placeholder="名称"></input>
      </view>
      <view
          :style='{"padding":"0 40rpx","boxShadow":"0 0 0px rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 1)","borderColor":"#ccc","margin":"0 0 20rpx 0","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"108rpx"}'
          class="cu-form-group" @tap="valueTap">
        <view
            :style='{"padding":"0","boxShadow":"0 0 16rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"rgba(161, 161, 161, 1)","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"160rpx","lineHeight":"80rpx","fontSize":"28rpx","borderStyle":"solid"}'
            class="title">值
        </view>
        <view class="right-input" style="padding:0">
          <image
              :style='{"padding":"0","boxShadow":"0 0 0px rgba(0,0,0,.3)","margin":"0 atuo","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","borderRadius":"100%","borderWidth":"2rpx","width":"88rpx","borderStyle":"solid","height":"88rpx"}'
              class="avator" v-if="ruleForm.value" :src="baseUrl+ruleForm.value" mode="aspectFill"></image>
          <image
              :style='{"padding":"0","boxShadow":"0 0 0px rgba(0,0,0,.3)","margin":"0 atuo","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","borderRadius":"100%","borderWidth":"2rpx","width":"88rpx","borderStyle":"solid","height":"88rpx"}'
              class="avator" v-else src="../../static/gen/upload.png" mode="aspectFill"></image>
        </view>
      </view>

      <!-- ${location} -->


      <view class="btn">
        <button
            :style='{"padding":"0","boxShadow":"0 0 16rpx rgba(0,0,0,0) inset","margin":"0","backgroundColor":"rgba(255, 105, 18, 1)","borderColor":"rgba(255, 105, 18, 1)","borderRadius":"80rpx","color":"#fff","borderWidth":"1","width":"300rpx","fontSize":"28rpx","borderStyle":"solid","height":"80rpx"}'
            @tap="onSubmitTap" class="bg-red">提交
        </button>
      </view>
    </form>


  </view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";

export default {
  data() {
    return {
      cross: '',
      ruleForm: {
        name: '',
        value: '',
      },
      // 登陆用户信息
      user: {},
      ro: {
        name: false,
        value: false,
      },
    }
  },
  components: {
    wPicker
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },


  },
  async onLoad(options) {
    let table = uni.getStorageSync("nowTable");
    // 获取用户信息
    let res = await this.$api.session(table);
    this.user = res.data;


    // 如果有登陆，获取登陆后保存的userid
    this.ruleForm.userid = uni.getStorageSync("userid")
    if (options.refid) {
      // 如果上一级页面传递了refid，获取改refid数据信息
      this.ruleForm.refid = options.refid;
      this.ruleForm.nickname = uni.getStorageSync("nickname");
    }
    // 如果是更新操作
    if (options.id) {
      this.ruleForm.id = options.id;
      // 获取信息
      res = await this.$api.info(`config`, this.ruleForm.id);
      this.ruleForm = res.data;
    }
    // 跨表
    this.cross = options.cross;
    if (options.cross) {
      var obj = uni.getStorageSync('crossObj');
      for (var o in obj) {
        if (o == 'name') {
          this.ruleForm.name = obj[o];
          this.ro.name = true;
          continue;
        }
        if (o == 'value') {
          this.ruleForm.value = obj[o];
          this.ro.value = true;
          continue;
        }
      }
    }
    this.styleChange()
  },
  methods: {
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.app-update-pv .cu-form-group .uni-input-input').forEach(el=>{
        //   el.style.backgroundColor = this.addUpdateForm.input.content.backgroundColor
        // })
      })
    },

    // 多级联动参数


    valueTap() {
      let _this = this;
      this.$api.upload(function (res) {
        _this.ruleForm.value = 'upload/' + res.file;
        _this.$forceUpdate();
        _this.$nextTick(() => {
          _this.styleChange()
        })
      });
    },

    getUUID() {
      return new Date().getTime();
    },
    async onSubmitTap() {


//跨表计算判断
      if ((!this.ruleForm.name)) {
        this.$utils.msg(`名称不能为空`);
        return
      }
      //更新跨表属性
      var crossuserid;
      var crossrefid;
      var crossoptnum;
      if (this.cross) {
        var statusColumnName = uni.getStorageSync('statusColumnName');
        var statusColumnValue = uni.getStorageSync('statusColumnValue');
        if (statusColumnName != '') {
          var obj = uni.getStorageSync('crossObj');
          if (!statusColumnName.startsWith("[")) {
            for (var o in obj) {
              if (o == statusColumnName) {
                obj[o] = statusColumnValue;
              }

            }
            var table = uni.getStorageSync('crossTable');
            await this.$api.update(`${table}`, obj);
          } else {
            crossuserid = Number(uni.getStorageSync('userid'));
            crossrefid = obj['id'];
            crossoptnum = uni.getStorageSync('statusColumnName');
            crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
          }
        }
      }
      if (crossrefid && crossuserid) {
        this.ruleForm.crossuserid = crossuserid;
        this.ruleForm.crossrefid = crossrefid;
        let params = {
          page: 1,
          limit: 10,
          crossuserid: crossuserid,
          crossrefid: crossrefid,
        }
        let res = await this.$api.list(`config`, params);
        if (res.data.total >= crossoptnum) {
          this.$utils.msg(uni.getStorageSync('tips'));
          return false;
        } else {
          //跨表计算
          if (this.ruleForm.id) {
            await this.$api.update(`config`, this.ruleForm);
          } else {
            await this.$api.add(`config`, this.ruleForm);
          }
          this.$utils.msgBack('提交成功');
        }
      } else {
        //跨表计算
        if (this.ruleForm.id) {
          await this.$api.update(`config`, this.ruleForm);
        } else {
          await this.$api.add(`config`, this.ruleForm);
        }
        this.$utils.msgBack('提交成功');
      }
    },
    optionsChange(e) {
      this.index = e.target.value
    },
    bindDateChange(e) {
      this.date = e.target.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      ;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    toggleTab(str) {
      this.$refs[str].show();
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20 upx;
}

.content:after {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  content: '';
  background-image: url(http://codegen.caihongy.cn/20220212/27765cb61e8943d18c29beb442e4374f.png);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

textarea {
  border: 1 upx solid #EEEEEE;
  border-radius: 20 upx;
  padding: 20 upx;
}

.title {
  width: 180 upx;
}

.avator {
  width: 150 upx;
  height: 60 upx;
}

.right-input {
  flex: 1;
  text-align: left;
  padding: 0 24 upx;
}

.cu-form-group.active {
  justify-content: space-between;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20 upx 0;
}

.cu-form-group {
  padding: 0 24 upx;
  background-color: transparent;
  min-height: inherit;
}

.cu-form-group + .cu-form-group {
  border: 0;
}

.cu-form-group uni-input {
  padding: 0 30 upx;
}

.uni-input {
  padding: 0 30 upx;
}

.cu-form-group uni-textarea {
  padding: 30 upx;
  margin: 0;
}

.cu-form-group uni-picker::after {
  line-height: 80 rpx;
}

.select .uni-input {
  line-height: 80 rpx;
}

.input .right-input {
  line-height: 88 rpx;
}
</style>
